/**
 * animateType.setting.js
 * @authors 杨兴洲（of2502）
 * @date    2017/6/20 0020 17:07
 * @version 1.0
 * @last-modify  杨兴洲（of2502）
 */
import React, { Component } from "react";
import { Map, fromJS } from "immutable";
const CDN_HOST =
  "//qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/x-site-ui-wechat/statics/slider/";
export default class AnimateTypeEdit extends Component<any, any> {
  static displayName = "AnimateTypeEdit";

  static defaultProps = {
    animateTypes: [
      { key: "normal", name: "划动", icon: CDN_HOST + "normal.png" },
      { key: "fade", name: "渐隐渐现", icon: CDN_HOST + "fade.png" }
    ]
  };

  render() {
    const { activeType, onChange, animateTypes } = this.props;
    return (
      <div>
        <div style={{ fontSize: 14, color: "#8a8a8a" }}> 转场动画：</div>
        <div className="animateTypes-container">
          {animateTypes.map(item => {
            const isActive = activeType === item.key;
            return (
              <div key={item.key} onClick={e => onChange(item.key)} className="animateTypes-item">
                <div
                  className="animateTypes-itemIcon"
                  style={{
                    backgroundImage: `url(${item.icon})`,
                    borderColor: isActive ? "#3089DC" : "#c3e0ff"
                  }}
                />
                <div className="animateTypes-itemTitle">{item.name}</div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
